<template>
  <div class="nav_bottom" ref="navRef">
    <div class="nav_btm_left">
      <span>Find X7 Ultra</span>
      <span>Find X7</span>
      <ul>
        <li>概览</li>
        <li>设计</li>
        <li>影像</li>
        <li>屏幕</li>
        <li>隐私</li>
        <li>效率</li>
        <li>性能</li>
      </ul>
    </div>
    <div class="nav_btm_right">
      <span>
        <!-- 尊享服务图标 -->
        <img class="enjoyService" src="../../../assets/img/icon/icon- enjoyService.png" alt="">
        尊享服务
      </span>
      <span>
        <!-- 参数 图标 -->
        <img class="icon-parameter" src="../../../assets/img/icon/icon-parameter.png" alt="">
        参数
      </span>
      <button>立即购买</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onBeforeUnmount } from 'vue'

const navRef = ref('')
// onMounted(() => {
//   scroll()
// })

// const scroll = () => {
//   window.onmousewheel = () => {
//     navRef.value.style.top = 0 + 'px'
//     if (window.scrollY <= 80 ) {
//       navRef.value.style.top = 52 + 'px'
//     }
//   }
// }

// onBeforeUnmount(() => {
//   window.onmousewheel = null
// })
</script>

<style scoped lang="scss">
.nav_bottom {
  width: 100%;
  text-align: center;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0 60px;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
  // position: fixed;
  z-index: 1000;
.nav_btm_left {
    height: 100%;
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      font-size: 14px;
      height: 16px;
      cursor: pointer;
    }
    span:first-child {
      width: 105px;
      border-right: 1px solid #ccc;
      // margin-right: 15px;
    }
    span:nth-child(2) {
      width: 75px;
      margin-right: 32px;
      color: #cacaca;
    }
    span:nth-child(2):hover {
      color: #000;
    }
    ul {
      display: flex;
      align-items: center;
      font-size: 14px;
      height: 100%;
      li {
        margin: 0 12px;
        color: #8d8d8d;
        height: 100%;
        line-height: 50px;
      }
      li:first-child {
        color: #000;
        height: 48px;
        border-bottom: 3px solid #2dc84e;
      }
      li:hover {
        color: #000;
      }
    }
  }
  .nav_btm_right {
    span {
      display: inline-block;
      margin-right: 24px;
      font-size: 14px;
      padding: 0 5px;
      height: 40px;
      width: 80px;
      text-align: center;
      line-height: 40px;
    }
    span:first-child {
      width: 100px;
    }
    span:nth-child(2) {
      width: 80px;
    }
    span:hover {
      background-color: #f6f6f6;
      border-radius: 30px;
      cursor: pointer;
    }
    button {
      width: 85px;
      height: 32px;
      text-align: center;
      border-radius: 20px;
      border: 0;
      cursor: pointer;
      font-size: 12px;
      font-weight: 888;
      background-color: #2cfe73;
    }
  }
}

</style>
